<template>
  <div id="app">
    <div id="nav">
      <router-link class="left" to="/">卡片</router-link>
      <router-link class="right" to="/about">列表</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="scss">
#app {
  text-align: right;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  .left {
    border: 1px solid rgb(215, 215, 215);
    padding: 8px 20px;
    border-radius: 5px 0 0 5px;
    color: #2c3e50;
    text-decoration:none;

    &.router-link-exact-active {
      color: rgb(48, 152, 255);
      border: 1px solid rgb(48, 152, 255);
    }
  }
    .right {
    border: 1px solid rgb(215, 215, 215);
    padding: 8px 20px;
    border-radius: 0 5px 5px 0;
    color: #2c3e50;
    text-decoration:none;

    &.router-link-exact-active {
      color: rgb(48, 152, 255);
      border: 1px solid rgb(48, 152, 255);
    }
  }
}
</style>
